<div class="upload-imgs-wrap">
  <dl
    class="upload-list"
    [sortablejs]="imgLists"
    [sortablejsOptions]="sortablejsOptions"
  >
    <ng-container *ngFor="let img of imgLists; let index = index;">
      <dd
        [ngStyle]="{
          'width': uploadSize + 'px',
          'height': uploadSize + 'px',
          'margin': limitSize === 1 ? '0' : '0 8px 8px 0'
        }"
      >
        <img
          nz-image
          nzDisablePreview
          [nzSrc]="img"
          [nzFallback]="fallback"
          (click)="showImgsCarousel(img, index)"
        />

        <div class="img-mask">
          <span class="mask-btn" title="预览" (click)="showImgsCarousel(img, index)">
            <i nz-icon nzType="eye" nzTheme="outline"></i>
          </span>

          <span *ngIf="!disabled" class="mask-btn m-l-10" title="删除" (click)="deleteImg(index)">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </span>

          <span [hidden]="disabled || !isDrag" class="mask-btn handle-sort m-l-10" title="排序">
            <i nz-icon nzType="drag" nzTheme="outline"></i>
          </span>
        </div>
      </dd>
    </ng-container>

    <dt
      *ngIf="!disabled"
      class="filter-sort"
      [ngStyle]="{'width': uploadSize + 'px', 'height': uploadSize + 'px'}"
      [hidden]="imgLists.length >= limitSize || isStartSort">
      <nz-upload
        class="upload-btn"
        [nzAccept]="limitParams.nzFileType"
        nzAction=""
        nzListType="picture-card"
        [nzSize]="limitParams.nzSize"
        [nzBeforeUpload]="beforeUpload"
        [nzCustomRequest]="uploadCustomRequest"
        [nzShowUploadList]="false"
        [nzDisabled]="uploadLoading">
        <ng-container>
          <i class="upload-icon" nz-icon [nzType]="uploadLoading ? 'loading' : 'plus'"></i>
        </ng-container>
      </nz-upload>
    </dt>
  </dl>
</div>